<template>
<view>
<view>
  <input @input="title" type="text" placeholder="发帖名称"></input>
</view>
<view>
  <picker @change="bindObjectPickerChange" :value="category" :range="category">
    <view class="picker">
      当前选择：{{category[objectIndex]}}
    </view>
  </picker>
</view>
<view>
  <input @input="number" type="number" placeholder="我的年龄"></input>
</view>
<view>
  <input @input="name" type="text" placeholder="我的称呼"></input>
</view>
<view>
  <input @input="phone" type="number" placeholder="我的联系方式"></input>
</view>
<view>
  <input @input="company" type="text" placeholder="内容来源"></input>
</view>
<textarea @input="handerInputChange" data-key="content" maxlength="1000" placeholder="内容" placeholderClass="c-placeholder" :value="form.claim"></textarea>
<view class="pr-lg fill-base text-right c-caption f-caption">{{form.claim?form.claim.length:0}}/1000</view>
<view class="pd-lg">
  <button @tap="submit" type="primary">
    <text>发布</text>
  </button>
</view>
<view @tap="goUrl" class="flex-center f-caption" data-url="/pages/info/agreement/agreement?key=info" style="height: 60rpx;">
  <view>点击发布，代表您完全认可并遵守</view>
  <view class="c-primary text-underline">《分类信息发布协议》</view>
</view>
</view>
</template>

<script>
// pages/info/add.js
const app = getApp();

export default {
  data() {
    return {
      ttlogin: false,
      category: ["论坛热门", "论坛笑话"],
      form: {
        title: "",
        claim: "",
        typeOfWork: "0",
        number: 0,
        name: "",
        company: "",
        phone: ""
      },
      id: "1",
      pay_switch: !0,
      objectIndex: 0
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {},
  onShow: function () {},
  methods: {
    submit(e) {
      let _this = this;

      uni.request({
        url: `${app.globalData.baseUrl}/release-work/work/1`,
        method: "POST",
        data: _this.form,
        success: res => {
          uni.navigateBack({
            success(res1) {
              uni.showToast({
                title: '发布成功-正在审核，预计两个工作日通过',
                icon: 'none',
                duration: 4000
              });
            }

          });
        }
      });
    },

    phone(e) {
      let form = this.form;
      form.phone = e.detail.value;
      this.setData({
        form
      });
    },

    number(e) {
      let form = this.form;
      form.number = e.detail.value;
      this.setData({
        form
      });
    },

    name(e) {
      let form = this.form;
      form.name = e.detail.value;
      this.setData({
        form
      });
    },

    company(e) {
      let form = this.form;
      form.company = e.detail.value;
      this.setData({
        form
      });
    },

    title(e) {
      let form = this.form;
      form.title = e.detail.value;
      this.setData({
        form
      });
    },

    chooseImage(e) {
      uni.chooseImage({
        success: res => {
          console.log(res.tempFilePaths);
          let form = this.form;
          form.imgs.push(res.tempFilePaths);
          this.setData({
            form
          });
        }
      });
    },

    handerInputChange(e) {
      let form = this.form;
      form.claim = e.detail.value;
      this.setData({
        form
      });
    },

    bindObjectPickerChange(e) {
      let form = this.form;
      form.typeOfWork = e.detail.value;
      this.setData({
        objectIndex: e.detail.value,
        form
      });
    }

  }
};
</script>
<style>
/* @import "../../../templates/login/index.css"; */

page {
    background: #fff;
}

input {
    height: 80rpx;
    margin: 10rpx;
    border: 1px solid #888888;
    border-radius: 15rpx;
}

picker {
    height: 80rpx;
    line-height: 80rpx;
    margin: 10rpx;
    border: 1px solid #888888;
    border-radius: 15rpx;
}

textarea {
    height: 240rpx;
    border: 1px solid #888888;
    margin: 10rpx;
    border-radius: 15rpx;
}

.scroll-x {
    white-space: nowrap;
}

.scroll-x-item {
    position: relative;
    display: inline-block;
    width: 150rpx;
    height: 150rpx;
    margin-right: 10rpx;
}

.scroll-x-item__img {
    width: 100%;
    height: 100%;
}

.del-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 30rpx;
    height: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
    color: white;
    line-height: 1;
}

.meal-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 28rpx;
    color: #888888;
}

.meal-list radio {
    margin-right: 60rpx;
    margin-bottom: 32rpx;
}
</style>